// import produce from 'immer'
import { useHandler } from '@cfe/hooks';
import { InputNumber } from 'antd';

const shouldDisabled = ({ max, min }) => {
  if (max < min) return true;
  return false;
};

// 实际上这个组件并不通用，不过似乎也不会有其他什么 case，姑且定制一下
const RangeCount = ({ value = [], onChange }) => {
  const handleChange = useHandler(({ start: nextStart, end: nextEnd }) => {
    const isDisabled = shouldDisabled({
      max: nextEnd ?? value[1],
      min: nextStart ?? value[0],
    });
    if (isDisabled) return;
    onChange([nextStart ?? value[0], nextEnd ?? value[1]]);
  });

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <InputNumber
        onChange={(v) => handleChange({ start: v })}
        value={value?.[0]}
        style={{ width: '120px' }}
        placeholder="大于等于"
        min={0}
      />
      <span style={{ margin: '0 6px' }}> - </span>
      <InputNumber
        onChange={(v) => handleChange({ end: v })}
        value={value?.[1]}
        style={{ width: '120px' }}
        placeholder="小于等于"
        min={0}
      />
    </div>
  );
};

export default RangeCount;
